<template>
  <div class="client-dashboard">
    <header class="dashboard-header">
      <h1>探索并预定您的理想会议空间</h1>
      <p class="subtitle">轻松查找、筛选并预定适合您团队的会议室</p>
    </header>

    <section class="meeting-rooms-section">
      <div class="controls-bar">
        <h3>会议室概览</h3>
        <div class="filter-controls">
          <label for="roomTypeFilter">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filter-square-fill" viewBox="0 0 16 16" style="margin-right: 5px; vertical-align: middle;">
              <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm.5 5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1M4 8.5h8a.5.5 0 0 1 0 1H4a.5.5 0 0 1 0-1m2 3h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1z"/>
            </svg>
            筛选类型:
          </label>
          <select id="roomTypeFilter" v-model="selectedRoomType">
            <option value="all">所有类型</option>
            <option value="1">教室</option>
            <option value="2">圆桌</option>
            <option value="3">董事会</option>
            <option value="4">多媒体</option>
          </select>
        </div>
      </div>

      <div v-if="isLoading" class="loading-placeholder">
        <div class="spinner"></div>
        <p>正在加载会议室信息...</p>
      </div>
      <div v-else-if="filteredMeetingRooms.length === 0 && !isLoading" class="no-rooms">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-calendar-x" viewBox="0 0 16 16" style="margin-bottom: 1rem;">
          <path d="M6.146 7.146a.5.5 0 0 1 .708 0L8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 0 1 0-.708z"/>
          <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
        </svg>
        <p>抱歉，暂无符合条件的会议室。</p>
        <p class="tip">尝试调整筛选条件或稍后再试。</p>
      </div>
      <transition-group name="room-list-animation" tag="ul" class="room-list" v-else>
        <li v-for="room in filteredMeetingRooms" :key="room.roomId" class="room-item">
          <div class="room-image-container">
            <img :src="getRoomImageUrl(room)" :alt="room.roomname" class="room-image" @error="handleImageError">
            <!-- <span :class="['status-badge', room.status === 0 ? 'status-available' : 'status-in-use']">
              {{ getRoomStatus(room.status) }}
            </span> -->
          </div>
          <div class="room-details">
            <h4>{{ room.roomname }}</h4>
            <div class="room-meta">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tags-fill" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 4px;">
                  <path d="M2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
                  <path d="M1.293 7.793A1 1 0 0 1 1 7.086V2a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l.043-.043-4.586-4.586a1 1 0 0 1 0-1.414l-1.586-1.586A1 1 0 0 0 1.293 7.793z"/>
                </svg>
                {{ getRoomType(room.roomType) }}
              </span>
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 4px;">
                  <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                  <path d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
                  <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
                </svg>
                容纳 {{ room.capacity }} 人
              </span>
            </div>
            <div class="room-config">
              <strong>配置:</strong>
              <span :class="['config-item', { 'config-normal': room.projector === 1, 'config-issue': room.projector === 0 }]">
                <svg v-if="room.projector === 1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-projector-fill" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 2px;">
                    <path d="M2 5.5a2.5 2.5 0 0 1 5 0V7h4V5.5a2.5 2.5 0 0 1 5 0V7h.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v1.5h-2.5V12H12V9.5H4V12H1.5V9.5H0V7.5a.5.5 0 0 1 .5-.5H1V7V5.5z"/>
                    <path d="M11.072 7.264c.302 0 .522.226.494.549a5.186 5.186 0 0 1-.087.688 4.084 4.084 0 0 1-.275.706c-.142.229-.22.365-.22.365s.03.01.03.01l-3.023 2.12L7.5 10.75V7.264h3.572z"/>
                </svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-projector" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 2px;">
                    <path d="M2.5 4a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm-1 1.5A1.5 1.5 0 0 1 2.5 4h11A1.5 1.5 0 0 1 15 5.5v5A1.5 1.5 0 0 1 13.5 12H11v1.5a.5.5 0 0 1-1 0V12H6v1.5a.5.5 0 0 1-1 0V12H2.5A1.5 1.5 0 0 1 1 10.5v-5zM2 6v4.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V6H2z"/>
                    <path d="m7.264 7.51 3.023 2.121L7.5 11.883V7.51z"/>
                </svg>
                投影仪
              </span>
              <span :class="['config-item', { 'config-normal': room.sound === 1, 'config-issue': room.sound === 0 }]">
                <svg v-if="room.sound === 1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-volume-up-fill" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 2px;">
                    <path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l-.707-.707z"/>
                    <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l-.707-.707z"/>
                    <path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182l-.707-.707A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l-.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
                </svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-volume-mute-fill" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 2px;">
                    <path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM13.854 5.146a.5.5 0 0 1 0 .708L12.207 7.5l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.207l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 7.5 9.146 5.854a.5.5 0 0 1 .708-.708L11.5 6.793l1.646-1.647a.5.5 0 0 1 .708 0z"/>
                </svg>
                音响
              </span>
              <span :class="['config-item', { 'config-normal': room.internet === 1, 'config-issue': room.internet === 0 }]">
                <svg v-if="room.internet === 1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-wifi" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 2px;">
                    <path d="M15.384 6.115a.485.485 0 0 0-.047-.736A12.444 12.444 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c2.507 0 4.847.868 6.716 2.164.205.138.48.07.668-.05zm-.722 1.434a.658.658 0 0 0-.061-.895A9.446 9.446 0 0 0 8 5c-1.905 0-3.68.56-5.16 1.553a.658.658 0 0 0-.061.895.716.716 0 0 0 .81.13A8.448 8.448 0 0 1 8 6c1.713 0 3.322.508 4.644 1.405.23.16.547.1.81-.13zm-.645 1.024A7.448 7.448 0 0 0 8 7c-1.279 0-2.495.33-3.542.91-.162.09-.394.048-.49-.12a.594.594 0 0 0-.121-.491.518.518 0 0 0-.809-.08A8.967 8.967 0 0 1 8 6c2.073 0 3.955.825 5.352 2.182.215.215.17.58-.094.722a.61.61 0 0 0-.33-.044.57.57 0 0 0-.192-.018zm-1.163 1.193a.518.518 0 0 0-.07-.65A5.448 5.448 0 0 0 8 8c-.993 0-1.936.246-2.764.695a.518.518 0 0 0-.07.65.579.579 0 0 0 .698.11A4.447 4.447 0 0 1 8 9c.836 0 1.62.22 2.298.616.24.139.533.074.698-.11zM8 10.082a1.001 1.001 0 0 0-1 1v.018a1 1 0 1 0 2 0v-.018a1 1 0 0 0-1-1z"/>
                </svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-wifi-off" viewBox="0 0 16 16" style="vertical-align: -2px; margin-right: 2px;">
                    <path d="M10.706 3.294A12.546 12.546 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854A12.403 12.403 0 0 0 10.706 3.294zM13.982 5.886a.518.518 0 0 0 .13-.81A9.449 9.449 0 0 0 8 5c-1.09 0-2.14.243-3.084.676l.829.829A8.455 8.455 0 0 1 8 6c1.713 0 3.322.508 4.644 1.405a.658.658 0 0 0 .13.81.658.658 0 0 0 .81-.13.658.658 0 0 0 .061-.895A9.449 9.449 0 0 0 8 5c-1.09 0-2.14.243-3.084.676l.829.829A8.455 8.455 0 0 1 8 6c1.713 0 3.322.508 4.644 1.405.1.07.218.1.326.1.16 0 .316-.06.43-.173.23-.16.547-.1.81.13a.658.658 0 0 0 .061.895zM8.535 10.035a2.916 2.916 0 0 1-1.07-2.113l.953-.953a1.916 1.916 0 0 0 .618 1.367l.006.006a1.916 1.916 0 0 0 1.366.618l-.953.953a2.916 2.916 0 0 1-2.113-1.07zM8 11.5a1.5 1.5 0 0 1 1.5 1.5.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5 1.5 1.5 0 0 1 1.5-1.5.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5 1.5 1.5 0 0 1-1.5-1.5.5.5 0 0 0-.5-.5h-.5a.5.5 0 0 0-.5.5 1.5 1.5 0 0 1-1.5 1.5.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5zM2.184 2.184c.39-.39 1.023-.39 1.414 0l10.218 10.218a.996.996 0 1 1-1.414 1.414L2.184 3.598a.996.996 0 0 1 0-1.414z"/>
                </svg>
                网络
              </span>
            </div>
            <p class="room-price"><strong>价格:</strong> ¥{{ room.price }} <span>/小时</span></p>
            <!-- <button class="btn-book">立即预定</button> -->
          </div>
        </li>
      </transition-group>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { getAllRooms } from '@/apis/room'; // API path remains as is

const meetingRooms = ref([]);
const selectedRoomType = ref('all');
const isLoading = ref(true);

// Image URL retrieval logic (for images in src/assets/)
const getRoomImageUrl = (room) => {
  // Define image filenames
  // Images should be in src/assets/, e.g., src/assets/room-type-classroom.png
  const imageFileMap = {
    1: 'room-type-classroom.png',
    2: 'room-type-multimedia.png',
    3: 'room-type-boardroom.png',
    4: 'room-type-roundtable.png',
  };
  const defaultImageName = 'default-room.png'; // e.g., src/assets/default-room.png

  const imageName = imageFileMap[room.roomType] || defaultImageName;

  try {
    // For Vite projects, use new URL to resolve assets in src/
    // Path is relative from this component (src/views/client/ClientDashboard.vue) to src/assets/
    return new URL(`../../assets/${imageName}`, import.meta.url).href;
  } catch (e) {
    console.warn(`Could not construct image URL for: ${imageName}. Error: ${e}. Check path and if image exists.`);
    // Fallback if URL construction fails or image is missing
    // You might want a placeholder image in your public directory for such cases
    // e.g., return '/images/placeholder.png';
    return ''; // Or path to a default placeholder image
  }
};

// Optional: Handle broken image links
const handleImageError = (event) => {
  console.warn('Image failed to load:', event.target.src);
  // Replace with a path to a generic placeholder in your public folder
  // or a base64 encoded placeholder
  event.target.src = '/images/default-placeholder.png'; // Make sure this placeholder exists in public/images
};


const filteredMeetingRooms = computed(() => {
  if (selectedRoomType.value === 'all') {
    return meetingRooms.value;
  }
  return meetingRooms.value.filter(room => room.roomType === parseInt(selectedRoomType.value));
});

const getRoomType = (type) => {
  switch (type) {
    case 1: return '教室';
    case 2: return '圆桌';
    case 3: return '董事会';
    case 4: return '多媒体';
    default: return '未知类型';
  }
};

const getRoomStatus = (status) => {
  switch (status) {
    case 0: return '可预定';
    case 1: return '使用中';
    default: return '未知状态';
  }
};

onMounted(async () => {
  isLoading.value = true;
  try {
    const response = await getAllRooms();
    if (response.code === 200 && response.data) {
      meetingRooms.value = response.data.map(room => ({
        ...room,
        projector: room.projector !== undefined ? room.projector : 0,
        sound: room.sound !== undefined ? room.sound : 0,
        internet: room.internet !== undefined ? room.internet : 0,
      }));
    } else {
      console.error('Failed to fetch meeting rooms:', response.msg);
      meetingRooms.value = [];
    }
  } catch (error) {
    console.error('Failed to fetch meeting rooms:', error);
    meetingRooms.value = [];
  } finally {
    isLoading.value = false;
  }
});
</script>

<style scoped>
/* CSS Variables for easy theming */
:root {
  --primary-color: #0A7AFF; /* 科技蓝 */
  --primary-color-dark: #0052D9;
  --accent-color: #00C4B6; /* 青色 */
  --accent-color-hover: #00A093;
  --text-color-primary: #303133;
  --text-color-secondary: #606266;
  --bg-color: #F5F7FA;
  --card-bg-color: #FFFFFF;
  --border-color: #E4E7ED;
  --status-available-bg: #E9F9F0; /* 淡绿色背景 */
  --status-available-text: #00B853; /* 深绿色文字 */
  --status-in-use-bg: #FFF0F0; /* 淡红色背景 */
  --status-in-use-text: #F56C6C; /* 深红色文字 */
  --font-family-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --box-shadow-light: 0 4px 12px rgba(0, 0, 0, 0.08);
  --box-shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.1);
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
}

.client-dashboard {
  padding: 2rem 2.5rem;
  background-color: var(--bg-color);
  font-family: var(--font-family-main);
  min-height: 100vh;
  color: var(--text-color-primary);
}

.dashboard-header {
  text-align: center;
  margin-bottom: 3rem;
}

.dashboard-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color-dark);
  margin-bottom: 0.5rem;
}

.dashboard-header .subtitle {
  font-size: 1.1rem;
  color: var(--text-color-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.meeting-rooms-section {
  background-color: var(--card-bg-color);
  border-radius: var(--border-radius-large);
  padding: 2rem;
  box-shadow: var(--box-shadow-medium);
}

.controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.controls-bar h3 {
  color: var(--primary-color-dark);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.filter-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.filter-controls label {
  font-weight: 500;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
}

.filter-controls select {
  padding: 0.6rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-medium);
  font-size: 0.95rem;
  cursor: pointer;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-controls select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(10, 122, 255, 0.2);
}

.loading-placeholder, .no-rooms {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-color-secondary);
}

.loading-placeholder .spinner {
  border: 4px solid rgba(0,0,0,0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: var(--primary-color);
  animation: spin 1s ease infinite;
  margin: 0 auto 1rem;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.no-rooms p {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.no-rooms .tip {
    font-size: 0.9rem;
    color: #909399;
}

.room-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* 稍微增大最小宽度 */
  gap: 2rem;
}

.room-item {
  background-color: var(--card-bg-color);
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.room-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--box-shadow-medium);
}

.room-image-container {
  width: 100%;
  height: 200px; /* 固定图片高度 */
  position: relative;
  overflow: hidden; /* 确保图片圆角效果 */
}

.room-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片不变形，裁剪填充 */
  display: block;
  transition: transform 0.4s ease;
}
.room-item:hover .room-image {
    transform: scale(1.05); /* 悬停时图片轻微放大 */
}

.status-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.4rem 0.8rem;
  border-radius: 1rem; /* 胶囊形状 */
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.status-available {
  background-color: var(--status-available-text); /* 使用纯色背景，文字白色更突出 */
}

.status-in-use {
  background-color: var(--status-in-use-text);
}

.room-details {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 使详情区域填满剩余空间 */
}

.room-details h4 {
  color: var(--primary-color-dark);
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.room-meta {
  display: flex;
  gap: 1rem;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.room-meta span {
    display: inline-flex;
    align-items: center;
}

.room-config {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.room-config strong {
    color: var(--text-color-primary);
    display: block;
    margin-bottom: 0.5rem;
}
.config-item {
  display: inline-flex; /* 改为 inline-flex 使图标和文字对齐 */
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem; /* 让配置项换行时有间距 */
  font-size: 0.85rem;
}
.config-normal {
    background-color: var(--status-available-bg);
    color: var(--status-available-text);
}
.config-issue {
    background-color: #FEF0F0; /* 浅黄色或浅红色提示 */
    color: #F56C6C;
    /* text-decoration: line-through; */ /* 可选：问题设备划线 */
}
.config-item svg {
    margin-right: 4px; /* 图标和文字间距 */
}

.room-price {
  margin: 0.5rem 0 1.5rem; /* 价格与按钮间距 */
  color: var(--text-color-primary);
  font-size: 1rem;
  font-weight: 500;
}
.room-price strong {
  font-size: 1.2rem;
  color: var(--accent-color);
}
.room-price span {
  font-size: 0.85rem;
  color: var(--text-color-secondary);
}

.btn-book {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: var(--border-radius-medium);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  align-self: flex-start; /* 按钮靠左对齐 */
  margin-top: auto; /* 将按钮推到底部 */
}

.btn-book:hover {
  background-color: var(--accent-color-hover);
  transform: scale(1.02);
}
.btn-book:active {
  transform: scale(0.98);
}

/* Vue TransitionGroup Animations */
.room-list-animation-enter-active,
.room-list-animation-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.room-list-animation-enter-from,
.room-list-animation-leave-to {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
}
.room-list-animation-move { /* 确保移动动画流畅 */
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
</style>